<style>
    .layui-form-label {
        width: 100px;
    }

    .layui-input-block {
        margin-left: 130px;
    }

    .el-input__inner {
        height: 30px !important;
    }

    .layui-form .el-cascader {
        line-height: 30px;
        ;
    }

    .layui-row.icon {
        margin-top: 20px;
        height: 40px;
    }

    .layui-row.icon .grid-demo .iconfont {
        padding: 10px;
        border: solid 1px var(--primary-color);
        color: var(--primary-color);
        margin: 15px;
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
    }
</style>
<div class="rightcontent rc-bg-grey">
    <div class="rc-pagepadding ">
        <div class=" rc-pannel layui-form">
            <div class=" rc-pannel-header rc-pagepadding rc-bold">
                <i class="iconfont goback rc-pointer">&#xe62b;</i> 编辑菜单
            </div>
            <div class="rc-pannel-body  rc-pagepadding">


                <div class="layui-form-item">
                    <label class="layui-form-label">所属应用</label>
                    <div class="layui-input-block">
                        <select name="plugin" autocomplete="off">
                            <option value="frame" <?php echo $menuinfo['plugin'] == 'frame' ? 'selected' : '' ?>>框架本身</option>
                            <?php foreach ($plugins as $plugin) {
                            ?>
                                <option <?php echo $menuinfo['plugin'] == $plugin['ident'] ? 'selected' : '' ?> value="<?php echo $plugin['ident']; ?>"><?php echo $plugin['title']; ?></option>
                            <?php
                            } ?>
                        </select>

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">菜单标识</label>
                    <div class="layui-input-block">
                        <input type="text" name="ident" id="ident" autocomplete="off" value="<?php echo $menuinfo['ident'] ?>" lay-verify="required" class="layui-input" title="分类名称" />

                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">父级菜单</label>
                    <div class="layui-input-block">
                        <input type="text" name="pident" id="pident" autocomplete="off" value="" class="layui-input" title="父级菜单" />

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" value="<?php echo $menuinfo['title'] ?> " autocomplete="off" value="" lay-verify="required" class="layui-input" title="分类名称" />

                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">菜单ICON</label>
                    <div class="layui-input-block">
                        <i class="iconfont icon-bokeyuan" id="selicon" style="font-size: 24px;cursor: pointer"></i>
                    </div>

                    <input type="hidden" id="icon" name="icon" autocomplete="off" value="<?php echo $menuinfo['icon'] == '' ? 'icon-bokeyuan' : $menuinfo['icon']  ?>" />
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">菜单类型</label>
                    <div class="layui-input-block">
                        <select name="type">
                            <option value="0" <?php echo $menuinfo['type'] == 0 ? 'selected' : '' ?>>菜单</option>
                            <option value="1" <?php echo $menuinfo['type'] == 1 ? 'selected' : '' ?>>按钮</option>
                        </select>

                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">跳转窗口</label>
                    <div class="layui-input-block">
                        <select name="target">
                            <option value="_self" <?php echo $menuinfo['target'] == '_self' ? 'selected' : '' ?>>本窗口</option>
                            <option value="_blank" <?php echo $menuinfo['target'] == '_blank' ? 'selected' : '' ?>>新窗口</option>
                        </select>

                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">链接地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" value="<?php echo $menuinfo['url'] ?>" autocomplete="off" value="" class="layui-input" title="分类名称" />

                    </div>
                </div>




                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort" autocomplete="off" value="<?php echo $menuinfo['sort'] ?>" lay-verify="required" class="layui-input" title="分类名称" />

                    </div>
                </div>


                <div class="layui-form-item rc-margin-bottom0">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="submit">提交</button>
                        <button type="reset" class="layui-btn layui-btn-sm">重置</button>
                    </div>
                </div>

            </div>



        </div>

    </div>
</div>
<script src="/static/admin/lib/layui/modules/cascader/cascader.js"></script>
<script>
    layui.use(function() {

        var form = layui.form;
        var layCascader = layui.layCascader;






        //渲染加载菜单
        var el_cascader;

        function renderMenus() {
            if (typeof(el_cascader) != 'undefined') {
                el_cascader.destroy();
            }
            $.ajax({
                url: '/admin/cnf/UcenterMenu/edit?type=selmenus', //请求路径
                type: "GET", //请求方式

                success: function(data) {
                    if (data.code == 0) {
                        var el_cascaderdata = data.data;
                        el_cascader = layCascader({
                            elem: '#pident',
                            filterable: true,
                            clearable: true,
                            options: el_cascaderdata,
                            props: {
                                value: 'ident',
                                label: 'title',
                                checkStrictly: true,
                            }
                        });
                        el_cascader.setValue('<?php echo $menuinfo['pident'] ?>');
                    } else {
                        toastr_error(data.message);
                    }
                },
                error: function() {

                },

            });

        }

        renderMenus();



        // 输入框点缀事件 - 搜索示例

        var icon = [
            'icon-chengyuanshuliang', 'icon-zhandianditu', 'icon-jurassic_company', 'icon-kekuozhanxingqiang', 'icon-shezhi',
            'icon-gongzuotai', 'icon-tiku', '623icon-kechengguanli', 'icon-xitong', 'icon-caidan',
            'icon-kechengguanli', 'icon-tianjia', 'icon-kecheng', 'icon-shipinku', 'icon-music',
            'icon-lingdao', 'icon-jiandujiancha-16px', 'icon-shichangxinxiang', 'icon-kekuozhanxingqiang', 'icon-xinrenkecheng',
            'icon-tongzhi', 'icon-wangpan', 'icon-14', 'icon-bokeyuan', 'icon-xiaoxi',
            'icon-yanfaguanli-lixiangguanli', 'icon-wenjianjia', 'icon-fanhui', 'icon-zhishu', 'icon-guanggaoguanli'
        ];

        $('#selicon').click(function() {

            var iconhtml = '';
            for (var i = 0; i < icon.length; i++) {
                if (i % 6 == 0) {
                    iconhtml += `<div class="layui-row icon" style="text-align:center">`;

                }
                iconhtml += `<div class="layui-col-md2">
                                 <div class="grid-demo "><i class="iconfont ` + icon[i] + `" val="` + icon[i] + `"></i></div>
                             </div>`;
                if (i % 6 == 5 || i == icon.length - 1) {
                    iconhtml += '</div>';
                }
            }
            layer.open({
                type: 1,
                title: '挑选ICON',
                area: ['460px', '400px'], // 宽高
                content: '<div>' + iconhtml + ' </div>'

            });

        });

        $("body").on("click", '.icon .iconfont ', function() {

            $('#selicon').removeClass();
            $('#selicon').addClass($(this).attr('val'));
            $('#selicon').addClass('iconfont');
            $('#icon').val($(this).attr('val'));
            layer.closeAll();

        })



        form.on('submit(submit)', function(data) {
            $.ajax({
                url: '/admin/cnf/UcenterMenu/edit?id=<?php echo request()->get('id') ?>', //请求路径
                type: "POST", //请求方式
                data: data.field, // 默认写法
                success: function(data) {
                    if (data.code == 0) {
                        toastr_success("编辑成功", function() {
                            window.location.href = '/admin/cnf/UcenterMenu/index';
                        });
                    } else {
                        toastr_error(data.message);
                    }
                },
                error: function() {

                },

            });
        });



    });
</script>